<div *ngIf="volume" [formGroup]="volume" class="volume-wrapper">
  <mat-form-field appearance="outline" id="type">
    <mat-label>Type</mat-label>
    <mat-select formControlName="type">
      <mat-option value="New">New</mat-option>
      <mat-option value="Existing">Existing</mat-option>
    </mat-select>
  </mat-form-field>

  <div formGroupName="extraFields" class="rokUrl-wrapper">
    <mat-form-field appearance="outline" id="rokUrl">
      <mat-label>Rok URL</mat-label>
      <input
        matInput
        formControlName="rokUrl"
        placeholder="Data Volume Rok URL"
        (paste)="autofillVolume($event)"
        (keyup.enter)="autofillVolume()"
      />
    </mat-form-field>
  </div>

  <!-- Volume Name Input -->
  <mat-form-field appearance="outline" id="name">
    <mat-label>Name</mat-label>
    <input matInput formControlName="name" />
  </mat-form-field>

  <!-- Size Input -->
  <mat-form-field appearance="outline" id="size">
    <mat-label>Size</mat-label>
    <input matInput formControlName="size" />
  </mat-form-field>

  <!-- Mount Input -->
  <mat-form-field appearance="outline" id="path">
    <mat-label>Mount Point</mat-label>
    <input matInput formControlName="path" />
  </mat-form-field>
</div>
